<template>
  <div class="business-info-main">
    <div class="business-info-main-title">
      <h3>电子会员卡</h3>
    </div>
    <div class="business-info-main-table">
      <div class="business-info-main-table-title">
        <Row>
          <i-col span="3" class="cTitle">卡片名称</i-col>
          <i-col span="6" class="cTitle">领卡</i-col>
          <i-col span="3" class="cTitle">退卡</i-col>
          <i-col span="6" class="cTitle">卡页面</i-col>
          <i-col span="6" class="cTitle rmCtitleBorder">卡详情</i-col>
        </Row>
      </div>
      <div class="business-info-main-table-body">
        <Row>
          <i-col span="3" class="cBody cardBody">
            <div class="cBody cardH rmCbodyBorder">{{cardStyleName}}</div>
            <div class="cBody-title">卡片种类</div>
            <div class="cBody cardH rmCbodyBorder">
              <span v-for="(item,index) in cardKind" :key="index">{{item.cardName}}</span>
            </div>
          </i-col>
          <i-col span="6" class="cBody cardBody">
            <div class="card cardL opencard">
              <img :src="cardImgSrc" class="opencard-img">
            </div>
            <div class="card cardR">
              <h4>1、领卡页图片</h4>
              <div class="cardUpload">
                <label for="uploadCardImage" class="uploadBtn">更换图片</label>
                <input type="file" id="uploadCardImage" ref="uploadCard" style="display: none;" @change="openCardImg"/>
              </div>
              <h4>2、用户协议</h4>
              <div class="protocol">
                <div class="protocol-list" v-for="(item,key,index) in protocolList">
                  <div class="span">{{key}}</div>
                  <div class="input">
                    <input class="input-info" v-model="protocolList[key]" :disabled="disableObj[key]"/>
                    <span class="inputIcon" @click="protocolChange(key)">
                    <img src="../../../../assets/img/business/noInput.png" v-show="disableObj[key]"/>
                    <img src="../../../../assets/img/business/canInput.png" v-show="!disableObj[key]"/>
                  </span>
                  </div>
                </div>
              </div>
            </div>
          </i-col>
          <i-col span="3" class="cBody cardBody close">
            <div class="close clearfix">
              <span>退卡审批时间</span>
              <div class="input">
                <input class="input-info" v-model="closeTime" :disabled="timeState"/>
                <span class="inputIcon" @click="closeTimeChange()">
                    <img src="../../../../assets/img/business/noInput.png" v-show="timeState"/>
                    <img src="../../../../assets/img/business/canInput.png" v-show="!timeState"/>
                 </span>
              </div>
              <span>天</span>
            </div>
          </i-col>
          <i-col span="6" class="cBody cardBody">
            <div class="card cardL alipayMenu">
              <img :src="cardImgSrc" class="opencard-img">
            </div>
            <div class="card cardR">
              <h4>卡页面菜单设置</h4>
              <h4>1、刷码入口菜单名称</h4>
              <div class="input">
                <input class="input-info" value="去刷码" :disabled="codeState"/>
                <span class="inputIcon" @click="codeChange()">
                    <img src="../../../../assets/img/business/noInput.png" v-show="codeState"/>
                    <img src="../../../../assets/img/business/canInput.png" v-show="!codeState"/>
                  </span>
              </div>
              <h4>2、菜单列表菜单</h4>
              <ul class="cardMenu">
                <li v-for="(item,index) in alipayMenuList">{{item.name}}</li>
              </ul>
            </div>
          </i-col>
          <i-col span="6" class="cBody cardBody rmCbodyBorder">
            <div class="card cardL codeMenu">
              <img :src="cardImgSrc" class="opencard-img">
              <img :src="banenrImgSrc" class="banner-img">
            </div>
            <div class="card cardR">
              <h4 style="white-space : normal">卡详情页菜单设置（建议不超过五个）</h4>
              <div class="businessList businessListMenu">
                <ul class="cardMenu">
                  <li>1、会员卡号</li>
                  <li>2、使用记录</li>
                  <li>3、开通线路</li>
                  <li>
                    <div class="businessList-info">
                      <div class="businessList-info-l">4、使用帮助</div>
                      <div class="businessList-info-r" @click="helpModel=true">查看内容>></div>
                    </div>
                  </li>
                  <li>5、退卡申请</li>
                  <!--<li v-for="(item,index) in codeMenuList" v-if="index!==0&&index!==1&&index!==2">{{index+1}}、{{item.name}}</li>-->
                </ul>
              </div>
              <h4 style="white-space : normal">卡详情页banner设置</h4>
              <div class="businessList">
                <div class="businessList-info">
                  <div class="businessList-info-l">banner图片</div>
                  <div class="businessList-info-r">
                    <label for="uploadBannerImage">更换图片>></label>
                    <input type="file" style="display: none" id="uploadBannerImage" ref="uploadBanner"
                           @change="bannerImg"/>
                  </div>
                </div>
                <div class="businessList-info">
                  <div class="businessList-info-l">图片链接</div>
                </div>
                <div class="businessList-info">
                  <div class="input">
                    <input class="input-info" v-model="banner.value" :disabled="banner.disabled"/>
                    <span class="inputIcon" @click="urlChange()">
                    <img src="../../../../assets/img/business/noInput.png" v-show="banner.disabled"/>
                    <img src="../../../../assets/img/business/canInput.png" v-show="!banner.disabled"/>
                  </span>
                  </div>
                </div>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
    </div>
    <Modal class="edit-modal" v-model="helpModel" title="使用帮助" @on-ok="helpModel=false" :mask-closable="false">
      <Helps :helpquestions="helpquestions"></Helps>
    </Modal>
  </div>
</template>
<script>
  import { mapActions } from 'vuex'
  import Helps from './busHelps.vue'

  export default {
    data () {
      return {
        dataId: JSON.parse(sessionStorage.getItem('dataId')),
        closeTime: '',
        timeState: true,
        protocolList: {
          protocolTitle: '',
          company: '',
          companyShort: '',
          cardName: '',
          telephone: ''
        },
        cardStyleName: '',
        cardKind: [],
        cardImgFile: '',
        cardImgSrc: '',
        disableObj: {
          protocolTitle: true,
          company: true,
          companyShort: true,
          cardName: true,
          telephone: true
        },
        codeState: true,
        alipayMenuList: [],
        codeMenuList: [],
        bannerImgFile: '',
        banenrImgSrc: '',
        helpModel: false,
        helpquestions: [],
        banner: {
          disabled: true,
          value: '这是图片url'
        }
      }
    },
    components: {Helps},
    created () {
      this.getOpenData()
      this.getStyleData()
      this.getDetailData()
    },
    methods: {
      ...mapActions('bussiness', ['uploadFiles']),
      // 获取开卡退卡数据
      getOpenData () {
        let url = this.api.bus.getOpen
        let params = {
          alipayClientId: this.dataId
        }
        this.$axios.get(url, {params: params}).then((res) => {
          if (res.data.msg.code === '20000') {
            if (res.data.data) {
              let openData = res.data.data
              this.closeTime = openData.approvalTime
              let protocolData = JSON.parse(openData.agreementTxt)
              this.protocolList.protocolTitle = protocolData.protocolTitle
              this.protocolList.company = protocolData.company
              this.protocolList.companyShort = protocolData.companyShort
              this.protocolList.cardName = protocolData.cardName
              this.protocolList.telephone = protocolData.telephone
              this.cardImgSrc = openData.list[0].url
            } else {
              this.$Modal.confirm({
                title: '提示',
                content: '未配置电子公交卡信息，请前往电子公交卡配置相关信息',
                onOk: () => {
                  this.$router.push('/initialization')
                },
                onCancel: () => {
                  this.$Message.info('未配置电子公交卡信息，无法获取电子公交卡信息')
                }
              })
            }
          } else if (res.data.msg.code === '40001') {
            this.$Message.error({content: '请配置相关信息', duration: 5})
          } else {
            this.$Message.error({content: res.data.msg.message, duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          this.$Message.error({content: '网络异常', duration: 5})
        })
      },
      getStyleData () {
        let url = this.api.bus.getStyle
        let params = {
          alipayClientId: this.dataId
        }
        this.$axios.get(url, {params: params}).then((res) => {
          if (res.data.msg.code === '20000') {
            let styleData = res.data.data
            if (styleData && styleData.listConfigurationCardType !== '无数据' && styleData.listConfigurationCardTypeImg !== '无数据') {
              let checkData = styleData.listConfigurationCardType
              let imgUrlData = styleData.listConfigurationCardTypeImg
              checkData.forEach((v, i) => {
                this.cardKind.push(v)
              })
              this.cardStyleName = imgUrlData[0].imgAddress
            } else {
              this.$Message.error({content: '请配置相关信息', duration: 5})
            }
          } else {
            this.$Message.error({content: res.data.msg.message, duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          this.$Message.error({content: '网络异常', duration: 5})
        })
      },
      // 获取卡样式数据
      getDetailData () {
        let url = this.api.bus.getMenu
        let params = {
          alipayClientId: this.dataId
        }
        this.$axios.get(url, {params: params}).then((res) => {
          if (res.data.msg.code === '20000' && res.data.data.listConfigurationCardMeun !== '无数据') {
            let detailData = res.data.data
            for (let i = 0; i < detailData.listConfigurationCardMeun.length; i++) {
              let obj = {
                id: i,
                name: detailData.listConfigurationCardMeun[i].cardMeunName,
                url: detailData.listConfigurationCardMeun[i].cardMeunUrl,
                checked: detailData.listConfigurationCardMeun[i].status === 'true'
              }
              this.alipayMenuList.push(obj)
            }
            for (let i = 0; i < detailData.configurationCardSettingList.length; i++) {
              let obj = {
                id: i,
                name: detailData.configurationCardSettingList[i].configurationCardSettingName,
                url: detailData.configurationCardSettingList[i].configurationCardSettingUrl,
                checked: detailData.configurationCardSettingList[i].status === 'true'
              }
              this.codeMenuList.push(obj)
            }
            this.banner.value = detailData.bannerImgUrl
            this.banenrImgSrc = detailData.bannerUrl
            this.helpquestions = JSON.parse(detailData.configurationCardHlepTxt)
          } else {
            this.$Message.error({content: '请配置相关信息', duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          this.$Message.error({content: '网络异常', duration: 5})
        })
      },
      openCardImg () {
        let len = this.$refs.uploadCard.files.length
        if (len === 1) {
          this.cardImgFile = this.$refs.uploadCard.files[0]
          let params = new FormData()
          params.append('files', this.cardImgFile)
          params.append('alipayClientId', this.dataId)
          let obj = {
            params: params,
            mes: this.$Message,
            url: this.api.bussiness.upLoadCardImg
          }
          this.uploadFiles(obj)
          var reader = new FileReader()
          reader.readAsDataURL(this.cardImgFile)
          let that = this
          reader.onload = function () {
            that.cardImgSrc = this.result
          }
        } else {
          this.cardImgFile = null
        }
      },
      protocolChange (key) {
        if (this.disableObj[key] === false) {
          this.$Modal.confirm({
            content: '确认修改?',
            onOk: () => {
              this.$Message.info('点击了确定')
              this.disableObj[key] = true
              let url = this.api.bussiness.upAgreementTxt
              let params = {
                alipayClientId: this.dataId,
                agreementTxt: JSON.stringify(this.protocolList)
              }
              this.$axios.get(url, {params: params}).then((res) => {
                if (res.data.msg.code === '20000') {
                  this.$Message.info('修改成功！')
                }
              }).catch((err) => {
                if (err) throw err
                this.$Message.error({content: '网络异常', duration: 5})
              })
            },
            onCancel: () => {
              this.$Message.info('点击了取消')
              this.disableObj[key] = true
            }
          })
        } else {
          this.disableObj[key] = false
        }
      },
      closeTimeChange () {
        if (this.timeState === false) {
          this.$Modal.confirm({
            content: '确认修改?',
            onOk: () => {
              this.$Message.info('点击了确定')
              this.timeState = true
              let url = this.api.bussiness.upApprovalTime
              let params = {
                alipayClientId: this.dataId,
                approvalTime: this.closeTime
              }
              this.$axios.get(url, {params: params}).then((res) => {
                if (res.data.msg.code === '20000') {
                  this.$Message.info('修改成功！')
                }
              }).catch((err) => {
                if (err) throw err
                this.$Message.error({content: '网络异常', duration: 5})
              })
            },
            onCancel: () => {
              this.$Message.info('点击了取消')
              this.closeTime = true
            }
          })
        } else {
          this.timeState = false
        }
      },
      urlChange () {
        if (this.banner.disabled === false) {
          this.$Modal.confirm({
            content: '确认修改?',
            onOk: () => {
              this.$Message.info('点击了确定')
              this.banner.disabled = true
              let url = this.api.bussiness.upBannerImgUrl
              let params = {
                alipayClientId: this.dataId,
                bannerImgUrl: this.banner.value
              }
              this.$axios.get(url, {params: params}).then((res) => {
                if (res.data.msg.code === '20000') {
                  this.$Message.info('修改成功！')
                }
              }).catch((err) => {
                if (err) throw err
                this.$Message.error({content: '网络异常', duration: 5})
              })
            },
            onCancel: () => {
              this.$Message.info('点击了取消')
              this.banner.disabled = true
            }
          })
        } else {
          this.banner.disabled = false
        }
      },
      codeChange () { // 提交协议或者图片url
        if (this.codeState === false) {
          this.codeState = true
        } else {
          this.codeState = false
        }
      },
      lookHelps () {},
      bannerImg () {
        let len = this.$refs.uploadBanner.files.length
        if (len === 1) {
          this.bannerImgFile = this.$refs.uploadBanner.files[0]
          let params = new FormData()
          params.append('files', this.bannerImgFile)
          params.append('alipayClientId', this.dataId)
          let obj = {
            params: params,
            mes: this.$Message,
            url: this.api.bussiness.upBannerImg
          }
          this.uploadFiles(obj)
          var reader = new FileReader()
          reader.readAsDataURL(this.bannerImgFile)
          let that = this
          reader.onload = function () {
            that.banenrImgSrc = this.result
          }
        } else {
          this.bannerImgFile = null
        }
      }
    }
  }
</script>
